<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16 text-black">反馈记录</view>
			</uni-nav-bar>
		</template>
		<template #empty>
			<view>
				<image style="width:136px;height:136px;" src="@/static/svg/order/empty-order.svg"></image>
				<view class="mt-4 text-center fs-12 text-color-regular font-normal leading-17">暂无数据</view>
			</view>
		</template>
		<view class="">
			<view v-for="(item,i) in dataList" :key="i" class="mx-16 mt-12 radius-12 bg-white p-12" @click="toDetail(item)">
				<view class="flex justify-between leading-22">
					<text class="text-color-regular fs-16 font-semibold flex-1 w-0 mr-20 text-cut">反馈与建议</text>
					<text class="text-color-hint fs-12 font-normal flex-shrink">{{item.createTime}}</text>
				</view>
				<view class="mt-8 text-color-regular fs-14 font-semibold">{{item.content}}</view>
				<view v-if="item.imgs" class="mt-8">
					<scroll-view scroll-x>
						<image v-for="(item,i) in item.imgs.split(',')" :key="i" class="radius-8 mr-8" style="width:80px;height:80px;" :src="item"></image>
					</scroll-view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup name="FeedbackRecord">
	import { ref, unref } from 'vue'
	import { getFeedbackListApi } from '@/pagesA/api/feedback.js'
	
	const goBack = () => uni.navigateBack()
	
	const paging = ref(null)
	const dataList = ref([])
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		getFeedbackListApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const toDetail = (item) => {
		uni.navigateTo({
			url: '/pagesA/feedback/feedback-detail',
			success: (res) => {
				res.eventChannel.emit('acceptDataFromOpenerPage', unref(item))
			}
		})
	}
</script>
